<template>
  <el-form inline>
    <!-- 
      {
        "id": 1,
        "name": "图书、音像、电子书刊"
      },
      -->
    <el-form-item label="一级分类">
      <el-select
        placeholder="请选择"
        v-model="category1Id"
        @change="handleCategory1Change"
        :disabled="disabled"
      >
        <el-option
          :label="c1.name"
          :value="c1.id + '__' + c1.name"
          v-for="c1 in category1List"
          :key="c1.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="二级分类">
      <el-select
        placeholder="请选择"
        v-model="category2Id"
        @change="handleCategory2Change"
        :disabled="disabled"
      >
        <el-option
          :label="c2.name"
          :value="c2.id + '__' + c2.name"
          v-for="c2 in category2List"
          :key="c2.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="三级分类">
      <el-select
        placeholder="请选择"
        v-model="category3Id"
        @change="handleCategory3Change"
        :disabled="disabled"
      >
        <el-option
          :label="c3.name"
          :value="c3.id + '__' + c3.name"
          v-for="c3 in category3List"
          :key="c3.id"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
import CategoryApi from "@/api/product/category";
export default {
  name: "CategorySelector",

  data() {
    return {
      category1List: [], // 一级分类列表
      category2List: [], // 二级分类列表
      category3List: [], // 三级分类列表
      category1Id: "", // 选择的一级分类id
      category2Id: "", // 选择的二级分类id
      category3Id: "", // 选择的三级分类id
      disabled: false, // 是否禁用select
    };
  },

  mounted() {
    // 异步获取一级分类列表显示
    this.getCategory1List();
  },

  methods: {
    /* 
    异步获取一级分类列表显示
    */
    async getCategory1List() {
      const result = await CategoryApi.getCategorys1();
      const category1List = result.data;
      this.category1List = category1List;
    },

    /* 
    什么时候分发: change事件回调中
		事件名: categoryChange
		携带的数据: 分类Id和分类级别(1/2/3)   {categoryId: 12, level: 1/2/3}
    */

    /* 
    选中的一级分类ID发生变化的事件回调
    */
    async handleCategory1Change(idName) {
      const [categoryId, categoryName] = idName.split("__");
      // 分发分类ID发生改变的事件
      this.$emit("categoryChange", { categoryId, categoryName, level: 1 });

      // 重置二/三分类数据
      this.category2List = [];
      this.category2Id = "";
      this.category3List = [];
      this.category3Id = "";

      // 请求获取二级分类列表显示
      const result = await CategoryApi.getCategorys2(categoryId);
      this.category2List = result.data;
    },
    /* 
    选中的二级分类ID发生变化的事件回调
    */
    async handleCategory2Change(idName) {
      const [categoryId, categoryName] = idName.split("__");

      // 分发分类ID发生改变的事件
      this.$emit("categoryChange", { categoryId, categoryName, level: 2 });

      // 重置三分类数据
      this.category3List = [];
      this.category3Id = "";

      // 请求获取三级分类列表显示
      const result = await CategoryApi.getCategorys3(categoryId);
      this.category3List = result.data;
    },
    /* 
    选中的三级分类ID发生变化的事件回调
    */
    handleCategory3Change(idName) {
      const [categoryId, categoryName] = idName.split("__");
      // 分发分类ID发生改变的事件
      this.$emit("categoryChange", { categoryId, categoryName, level: 3 });
    },
  },
};
</script>
